<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment :: head(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!-- 兼容移动端和PC端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/semantic-UI/semantic.min.css">
    <link rel="stylesheet" href="./css/typo.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./lib/prism/prism.css">
    <link rel="stylesheet" href="./lib/tocbot/tocbot.css">
    <link rel="stylesheet" href="./css/me.css">
    <title>Blog</title>
</head>
<body>
    <!-- 导航 -->
    <!-- inverted 反转   attached 没有圆角 -->
    <nav th:replace="_fragment :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <!-- stackable屏幕下的时候可堆叠的 适应手机端 -->
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">陈楷的Blog</h2>
                <!-- 标签加了mini之后   火狐正常显示 edge错位显示  所以加上small -->
                <a href="#" class="item m-item m-mobile-hide"><i class="small home icon"></i>首页</a>
                <a href="#" class="item m-item m-mobile-hide"><i class="small idea icon"></i>分类</a>
                <a href="#" class="item m-item m-mobile-hide"><i class="small tags icon"></i>标签</a>
                <a href="#" class="item m-item m-mobile-hide"><i class="small clone icon"></i>归档</a>
                <a href="#" class="item m-item m-mobile-hide"><i class="small info icon"></i>关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <!-- transparent 颜色灰色 -->
                    <div class="ui icon inverted transparent input ">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    

    <!-- 中间容器 -->
    <!-- animated lightSpeedIn -->
    <div class="m-padded-tb-big m-container-small animated lightSpeedIn" id="waypoint">
        <div class="ui container">

             <!-- 头部 -->
            <div class="ui top attached segment">
                <div class="ui horizontal link list">
                    <div class="item">
                        <img th:src="@{${blog.user.avatar}}" src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" target="_blank" class="header" th:href="@{/about}" th:text="${blog.user.Nickname}">陈楷楷</a></div>
                    </div>
                    <div class="item">
                        <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2022-06-01</span>
                    </div>
                    <div class="item">
                        <i class="eye icon"></i><span th:text="${blog.views}">190</span>
                    </div>
                </div>
            </div>

            <!-- 图片区域 -->
            <div class="ui attached padded segment">    
                <img th:src="@{${blog.firstPicture}}" src="https://unsplash.it/800/500?image=1005" alt="" class="ui fluid rounded image">
            </div>

            <!-- 博客内容 -->
            <div class="ui attached segment">
       
                <div class="ui right aligned basic segment">
                    <div class="ui label orange basic" th:text="${blog.flag}">原创</div>
                </div>

                <h2 class="ui center aligned header" th:text="${blog.title}">关于刻意练习的清单</h2>
                <br>

                <!--正文-->
                <div id="content" class="typo typo-selection js-toc-content m-padded-lr m-padded-tb-large" th:utext="${blog.content}">

                    <h1 id="title">中文网页重设与排版：<i class="serif">Typo.css</i></h1><br/>
                    <h2 id="tagline" class="serif">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2>
                    <h5 id="appendix2">2、开源许可</h5>

                </div>

                <!-- 标签 -->
                <div class="m-padded-lr">
                    <div class="ui label basic teal left pointing" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论</div>
                </div>  

                <!-- 赞赏 -->
                <div th:if="${blog.appreciation}">
                    <div class="ui center aligned basic segment">
                        <!-- circular圆形边框 basic 去除边框 -->
                        <button class="ui orange basic circular button" id="payButton">赞赏
                        </button>


                        <!-- 打赏 -->
                        <div class="ui payQR flowing popup transition hidden">
                            <div class="ui orange basic label">
                                <div class="ui images" style="font-size:inherit !important">
                                    <div class="image">
                                        <img th:src="@{/image/WeChat.jpg}" alt="" class="ui rounded bordered image" style="width:120px">
                                        <div>微信</div>
                                    </div>
                                    <div class="image">
                                        <img th:src="@{/image/WeChat.jpg}" alt="" class="ui rounded bordered image" style="width:120px">
                                        <div>支付宝</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>

                <!-- 博客详细信息 -->
                <div class="ui attached positive message" th:if="${blog.shareStatement}">
                    <div class="ui middle aligned grid">
                        <div class="eleven wide column">
                            <ui class="list">
                                <li>作者: <span th:text="${blog.user.Nickname}">陈楷</span> <a href="" th:href="@{/about}">(联系作者）</a></li>
                                <li>发表时间：<span th:text="${blog.createTime}">2022-06-01</span></li>
                                <li>版权声明：自由转载-非商用-保持署名</li>
                                <li>转载地址：请在文末添加 博客地址链接</li>
                            </ui>
                        </div>
                        <div class="five wide column">
                            <img src="/image/WeChat.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px">
                        </div>
                    </div>
                </div>

                <!-- 留言区域列表 -->
                <div class="ui bottom attached segment" th:if="${blog.commenttabled}">
                    <!--评论列表    动态加载这块-->
                    <div id="comment-container" class="ui teal segment">
                        <div th:fragment="commentlist">
                            <div class="ui threaded comments" style="max-width: 100%">
                                <h3 class="ui dividing header">评论</h3>
                                <div class="comment" th:each="comment : ${comments}">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/800/500?image=1005" th:src="@{${comment.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span th:text="${comment.nickname}">Matt</span>
                                            <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}">博主
                                            </div>
                                        </a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">今天下午 5:42</span>
                                        </div>
                                        <div class="text" th:text="${comment.content}">江西龙头是陈楷吗？</div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt" onclick="reply(this)"
                                            th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}">回复</a>
                                        </div>
                                    </div>
                                    <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                        <div class="comment" th:each="reply : ${comment.replyComments}">
                                            <a class="avatar">
                                                <img src="https://unsplash.it/800/500?image=1005" th:src="@{${reply.avatar}}">
                                            </a>
                                            <div class="content">
                                                <a class="author">
                                                    <span th:text="${reply.nickname}">Matt</span>
                                                    <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.adminComment}">博主</div>
                                                    &nbsp;
                                                    <span th:text="|@${reply.parentComment.nickname}|" class="m-teal">@matt</span>
                                                </a>
                                                <div class="metadata">
                                                    <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">今天下午 5:42</span>
                                                </div>
                                                <div class="text" th:text="${reply.content}">江西龙头是陈楷吗？</div>
                                                <div class="actions">
                                                    <a class="reply" data-commentid="1" data-commentnickname="Matt" onclick="reply(this)"
                                                       th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}">回复</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                 </div>
                             </div>
                         </div>
                    </div>
                    <!--评论 form表单-->
                    <div id="comment-form" class="ui form">
                        <input type="hidden" name="blog.id" th:value="${blog.id}">
                        <input type="hidden" name="parentComment.id" value="-1">
                        <div class="field">
                            <textarea name="content" placeholder="请输入想要评论的信息..."></textarea>
                        </div>
                        <div class="fields">
                            <div class="field m-mobile-wide m-margin-bottom-mini">
                                <div class="ui left icon input">
                                    <i class="user icon"></i>
                                    <input type="text" name="nickname" placeholder="姓名"  th:value="${session.user}!=null ? ${session.user.nickname}">
                                </div>
                            </div>
                            <div class="field m-mobile-wide m-margin-bottom-mini">
                                <div class="ui left icon input">
                                    <i class="mail icon"></i>
                                    <input type="text" name="email" placeholder="邮箱"  th:value="${session.user}!=null ? ${session.user.email}">
                                </div>
                            </div>
                            <div class="field m-mobile-wide m-margin-bottom-mini">
                                <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide">
                                    <i class="edit icon"></i>评论
                                </button>
                            </div>
                        </div>
                        <!-- 显示错误信息 校验表单的 -->
                        <div class="ui error message"></div>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <!--滚动条-->
    <div class="m-padded m-fixed m-right-bottom" id="toolbar" style="display: none">
        <div class="ui vertical icon buttons">
            <button type="button" class="ui toc teal button">目录</button>
            <a href="#comment-container" class="ui teal button">留言</a>
            <button class="ui icon button wechat"><i class="weixin icon"></i></button>
            <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
        </div>
    </div>

    <div class="ui toc-container flowing popup transition hidden" style="width:250px">
        <ol class="js-toc"></ol>
    </div>

    <div id="qrcode" class="ui wechat-QR flowing popup transition hidden" style="width: 130px">
        <!-- <img style="width:120px" src="./image/WeChat.jpg"  alt="" class="ui rounded imager"> -->
    </div>

    <br>
    <br>

    <!-- 底部footer -->
    <footer th:replace="_fragment::footer" class="ui  inverted vertical segment m-footer-padding-tb-massive">
        <div class="ui center aligned container   ">
            <div class="ui inverted divided stackable grid">
                <!--二维码-->
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./image/WeChat.jpg" th:src="@{/images/WeChat.jpg}" class="ui rounded image"
                                 style="width: 110px" alt=""/>
                        </div>
                    </div>
                </div>
                <!--文字-->
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">江西龙头的故事</a>
                        <a href="#" class="item">陈楷的风光一生</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emall:1240863484@qq.com</a>
                        <a href="#" class="item">QQ:1240863484</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">博客简介</h4>
                    <p class="m-text-thin m-text-spaced  m-opacity-mini">
                        这是我的个人博客、会分享关于编程、写作、思考相关的任何内容、希望可以给来到这儿的人有所帮助...
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider">
            <br>
            <br>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">
                Copyright © 2022 - 06 - 01 Lirenmi Designed by Lirenmi
            </p>
            </div>
        </div>
    </footer>


<script th:src="@{/js/Jquery.js}"></script>
<script th:src="@{/css/semantic-UI/semantic.min.js}"></script>
<script th:src="@{/lib/prism/prism.js}"></script>
<script th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script th:src="@{/lib/qrcode/qrcode.min.js}"></script>
<script th:src="@{/lib/jquery-scrollTo/jquery.scrollTo.min.js}"></script>
<script th:src="@{/lib/jquery.waypoints/jquery.waypoints.min.js}"></script>

    <!--雪花特效-->
    <script th:src="@{http://www.lmlblog.com/winter/templets/xq/js/snowy.js}"></script>
    <script th:src="@{http://www.lmlblog.com/blog/14/js/Snow.js}"></script>
    <style type="text/css">
        .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
    </style>
    <div class="snow-container"></div>
    <!---->


<script type="text/javascript" th:inline=javascript>
$('.menu.toggle').click(function(){
    //点击这个按钮去除css中的m-mobile-hide样式
    $('.m-item').toggleClass('m-mobile-hide');
});

$('#payButton').popup({
    popup: $('.payQR.popup'),
    on: 'hover',
    position: 'bottom center'
});

$('.toc.button').popup({
    popup: $('.toc-container.popup'),
    on: 'click',
    position: 'left center'
});

/*目录生成*/
tocbot.init({
    // Where to render the table of contents.
    tocSelector: '.js-toc',  //初始化到那个区域
    // Where to grab the headings to build the table of contents.
    contentSelector: '.js-toc-content',   //内容元素
    // Which headings to grab inside of the contentSelector element.
    headingSelector: 'h1, h2, h3',   //那些标题生成
    // For headings inside relative or absolute positioned containers within content.
    hasInnerContainers: true,


});

$('.wechat').popup({
    popup: $('.wechat-QR'),
    on: 'hover',
    position: 'left center'
});

 /*生成二维码二维码*/
 var serurl = /*[[#{blog.serurl}]]*/"";
 var url =/*[[@{/blog/{id}(id=${blog.id})}]]*/"";
 var qrcode = new QRCode("qrcode", {
        text: serurl+url,
        width: 110,
        height: 110,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
 });

$('#toTop-button').click(function () {
    $(window).scrollTo(0, 500);
});

/*滚动侦测*/
var waypoint = new Waypoint({
    element: document.getElementById('waypoint'),

    handler: function (direction) {
        if (direction == 'down') {
            $('#toolbar').show(500);  //500是时间  单位毫秒
        } else {
            $('#toolbar').hide(500);
        }
        //console.log('Scrolled to waypoint!' + direction);
    }
});

//校验表单
$('.ui.form').form({
    fields: {
        title: {
            identifier: 'content',
            rules: [{
                type: 'empty',
                prompt: '请输入评论内容'
            }]
        },
        content: {
            identifier: 'nickName',
            rules: [{
                type: 'empty',
                prompt: '请输入你的昵称'
            }]
        },
        type: {
            identifier: 'email',
            rules: [{
                type: 'email',
                prompt: '请填写正确的邮箱地址'
            }]
        }
    }
});

/*评论判断校验是否成功*/
$('#commentpost-btn').click(function () {
    var boo = $('.ui.form').form('validate form');  //如果表单校验成功 就返回true
    if (boo) {
        console.log("校验成功");
        //校验成功后发送ajax请求
        postData();
    } else {
        console.log("校验失败");
    }
});

//页面一加载的时候，就加载评论请求
$(function () {
    $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"")
});


//评论表单发送ajax请求
/*评论表单 Ajax请求*/
function postData() {
    $("#comment-container").load(/*[[@{/comments}]]*/"", {   //发送请求
        "parentComment.id": $("[name='parentComment.id']").val(),
        "blog.id": $("[name='blog.id']").val(),
        "nickname": $("[name='nickname']").val(),
        "email": $("[name='email']").val(),
        "content": $("[name='content']").val()
    }, function (responseTxt, statusTxt, xhr) {   //回调函数   callback  提交成功  xhr 就是200
        $(window).scrollTo($('#comment-container'), 500);   //提交完成之后 滚动到评论的部分  就是通过id  来滚动到的
        clearContent();
    })
};

//提交完之后  清空表单内容
function clearContent(){
    $("[name='content']").val('');
    $("[name='parentComment.id']").val(-1)
    $("[name='content']").attr("placeholder", "请输入想要评论的信息...");
}


//点击回复响应的事件
function reply(obj) {
    var commentId = $(obj).data('commentid');
    var commentNickname = $(obj).data('commentnickname');
    //设置表单中的的预选值，改为@评论用户名  并且得到焦点
    $("[name='content']").attr("placeholder", "@" + commentNickname).focus();
    //设置回复评论的用户的父级评论id为父级用户commentId
    $("[name='parentComment.id']").val(commentId);
    //点击回复跳滚动到表单的位置
    $(window).scrollTo($('#comment-form'), 500);
}



</script>
</body>
</html>